<template>
  <div class="monkey-setting-wrap">
    <div class="switch-wrap">
      <div class="item-wrap">
        <div class="left">
          <span class="name">启用saasweb调试</span>
        </div>
        <div class="right" @click="setSaasWebStatus()" :class="{select:saasWeb_available}">
          <span></span>
        </div>
      </div>
    </div>
    <div class="setting-wrap" v-show="saasWeb_available">
      <div class="item-wrap">
        <p class="name"> <span>主应用地址：<i style="color: red;">*</i></span><span class="clear" @click="saasWebInfoDefault.targetUrl =''">清空</span></p>
        <div class="setting-content">
          <input type="text" class="input_text" v-model="saasWebInfoDefault.targetUrl">
        </div>
        
      </div>
      <div class="item-wrap">
        <p class="name">子应用接入方式：</p>
        <div class="setting-content">
	        <label><input name="nestingType" type="radio" v-model="saasWebInfoDefault.nestingType" value="qiankun" />qiankun</label>
          <label><input name="nestingType" type="radio" v-model="saasWebInfoDefault.nestingType" value="iframe" />iframe</label>
        </div>
        
      </div>
      <div class="item-wrap">
        <p class="name">隐藏主应用导航栏：</p>
        <div class="setting-content">
          <label><input name="hideHeader" type="radio" v-model="saasWebInfoDefault.hideHeader" :value="false"/>否</label>
          <label><input name="hideHeader" type="radio" v-model="saasWebInfoDefault.hideHeader" :value="true"/>是</label>
        </div>
      </div>
      <div class="item-wrap">
        <p class="name">子应用数据来源：</p>
        <div class="setting-content">
          <label><input name="ajax" type="radio" v-model="saasWebInfoDefault.ajax" :value="false"/>线上</label>
	        <label><input name="ajax" type="radio" v-model="saasWebInfoDefault.ajax" :value="true"/>本地</label>
        </div>
      </div>
      <div class="item-wrap">
        <p class="name">自定义菜单名称：</p>
        <div class="setting-content">
          <input type="text" class="input_text" v-model="saasWebInfoDefault.authorizationName" placeholder="不填使用默认值">
        </div>
      </div>
      <div class="item-wrap">
        <p class="name">子应用信息：</p>
        <div class="setting-content" :title="saasWebInfoDefault.localUrl + saasWebInfoDefault.authorizationId">
          <p v-text="saasWebInfoDefault.serverName + '/' + saasWebInfoDefault.authorizationId"></p>
        </div>
      </div>

    </div>
    <div class="btn-wrap" v-show="saasWeb_available">
      <span @click="save()">{{proxyStatus ? "跳转至调试页面":"保存配置"}}</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { mkApi } from "../utils/monkeyTool/monkeyApi"
import { reactive, ref,computed, onMounted} from 'vue'
import { routerApi } from "../hooks/routers"
import  { I_SAAS_WEB_DEBUG_INFO} from "../utils/monkeyTool/data-type"
// 判断页面是否已经被拦截
const proxyStatus = computed(()=> {
  return routerApi.getProxyStatus()
})
const saasWeb_available = ref(mkApi.SAAS_WEB_DEBUG_AVAILABLE.get())
const routerArrayInfo = routerApi.getRouterArrayInfo()

console.log('routerArrayInfo: ', routerArrayInfo);
// saasweb嵌套调试相关-------------------------------------------->
const saasWebInfoDefault = reactive<I_SAAS_WEB_DEBUG_INFO>({
  targetUrl:"http://doimp.persagy.com/",
  nestingType:"qiankun",
  hideHeader:false,
  authorizationName:"",
  localhost:location.host,
  localUrl:location.origin + "/" + location.pathname.replace("//","/")?.split("/")?.[1] + "/",
  authorizationId:location.pathname.replace("//","/")?.split("/")?.[2] ?? "",
  serverName:location.pathname.replace("//","/")?.split("/")?.[1] ?? "",
  ajax:false,
  otherRouter:routerArrayInfo.map(res => res.pathName)
})
const saasWebInfo = mkApi.SAAS_WEB_DEBUG_INFO.get()
// 如果saasWebInfo存在且开启乾坤调试，更改默认值
if(saasWebInfo.targetUrl && mkApi.SAAS_WEB_DEBUG_AVAILABLE.get()){
  for(let i in saasWebInfoDefault){
    if(i !== "localUrl" || !location.href.includes("localhost")){
      saasWebInfoDefault[i] = saasWebInfo[i]
    }else{
      saasWebInfoDefault[i] = location.origin + "/" + location.pathname.replace("//","/")?.split("/")?.[1] + "/"
    }
  }
}
// 使用上一次的记录填充 url
if(saasWebInfo.targetUrl){
  saasWebInfoDefault.targetUrl = saasWebInfo.targetUrl
}
const activePathName = mkApi.ACTIVE_PATHNAME.get()
if(!activePathName || !saasWebInfo.targetUrl) {
  saasWeb_available.value = false
  mkApi.SAAS_WEB_DEBUG_AVAILABLE.set(false)
  mkApi.SAAS_WEB_DEBUG_INFO.set({})
}
function setSaasWebStatus(){
  const status = saasWeb_available.value
  if(status){
    saasWeb_available.value = !saasWeb_available.value
    mkApi.SAAS_WEB_DEBUG_AVAILABLE.set(saasWeb_available.value)
    location.reload()
  }else{
    if(!location.href.includes("localhost")) return alert("请在【本地开发的前端界面】点击此按钮！")
    saasWeb_available.value = !saasWeb_available.value
  }
}
// 其他页面关闭调试时，会导致当前页面显示有问题，此时刷新页面
function refreshByUnHealthStatus(){
  if(proxyStatus.value && !mkApi.SAAS_WEB_DEBUG_AVAILABLE.get()){
    if(confirm("saasweb调试状态异常！请刷新页面！")){
      location.reload()
    }
  }
}
const save = () =>{
  refreshByUnHealthStatus()
  mkApi.SAAS_WEB_DEBUG_INFO.set(saasWebInfoDefault)
  mkApi.SAAS_WEB_DEBUG_AVAILABLE.set(true)
  if(!location.href.includes("localhost")){
    if(location.href.includes(saasWebInfo.serverName) && location.href.includes(saasWebInfo.authorizationId)){
      location.reload()
    }else{
      location.href = saasWebInfo.targetUrl
    }
  }else{
    window.open(saasWebInfoDefault.targetUrl)
    location.reload()  
  }
}
</script>
<style lang="less" scoped>
.monkey-setting-wrap{
  padding:5px;
  max-height: 400px;
  overflow-y: auto;
  font-size: 13px;
  overflow-x: hidden;
  color: #373C43;
  .switch-wrap{
    border-radius: 5px;
    height: 24px;
    line-height: 24px;
    padding: 0 5px;
    .item-wrap{
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        font-weight: 500;
      }
      .right{
        width: 30px;
        height: 15px;
        background: rgb(220 223 230);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 2px;
        box-sizing: border-box;
        span{
          height: 12px;
          width: 12px;
          background: #fff;
          display: block;
          border-radius: 50%;
        }
      }
      .select{
        justify-content: flex-end;
        background: rgb(64 158 255);
        transition: all .2s linear;
      }
    }
  }
  .setting-wrap{
    border-top: 1px solid gainsboro;
    margin: 5px;
    .item-wrap{
      margin: 5px 0;
      color: #606266;
      background: #F5F7FA;
      border-radius: 2px;
      font-size: 12px;
      padding: 3px 0;
      .setting-content{
        margin-top: 5px;
        padding: 0;
        display: flex;
        align-items: center;
        label{
          display: flex;
          align-items: center;
          padding-left: 10px;
          width: 70px;
          input{
            margin-right: 5px;
          }
        }
        .input_text{
          border: 1px solid #ccc;
          padding: 3px 5px;
          width: 100%;
          color: #8d9399;
          background: #fff;
          border-radius: 3px;
          box-sizing: border-box;
          -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
          -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
        }
        .input_text:focus{
          border-color: #66afe9;
          outline:unset;
          -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }
        p{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      &:hover{
        border-bottom: 1px solid #409eff;
      }
      
    }
  }
  .btn-wrap{
    display: flex;
    justify-content: end;
    padding-right: 5px;
    margin-top: 10px;
    span{
      display: inline-block;
      padding: 0 10px;
      height: 25px;
      border-radius: 5px;
      text-align: center;
      line-height: 25px;
      background-color: #0091ff;
      border-color: #0091ff;
      color: #fff;
      cursor: pointer;
    }
   
  }
  .name{
    display: flex;
    justify-content: space-between;
    .clear{
      color: rgb(172, 47, 40);
      background-color: rgb(253, 227, 226);
      border-radius: 5px;
      font-size: 12px;
      padding: 0 5px;
      line-height: 15px;
      cursor: pointer;
    }
  }

}
</style>